<template>
	<cl-page statusBarBackground="#fff" background-color="#fff" :fullscreen="true">
		<cl-topbar
			:border="false"
			background-color="#fff"
			color="#333"
			:title="t('bill.consume.title')"
		/>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="flex flex-center flex-column">
				<view class="t1">Filicori</view>
				<view class="t2">-899.00</view>
				<view class="t3">{{ $t("bill.consume.success") }}</view>
			</view>

			<view class="list mt30">
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.type") }}</view>
					<view class="t5">{{ $t("bill.consume.xy") }}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.product") }}</view>
					<view class="t5">Filicori 500g</view>
				</view>
				<view class="flex flex-between align-top li">
					<view class="t4">{{ $t("bill.consume.address") }}</view>
					<view class="t5">{{
						cache.lang == "zh"
							? "北京北京市朝阳区光华路SOHO二期C座C3-7"
							: "C3-7, Block C, SOHO Phase II, Guanghua Road, Chaoyang District, Beijing"
					}}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.wl") }}</view>
					<view class="t5">{{ cache.lang == "zh" ? "已发货" : "Shipped" }}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.class") }}</view>
					<view class="t5">{{ cache.lang == "zh" ? "消费" : "Consumption" }}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.createtime") }}</view>
					<view class="t5">2018-02-13 17:55</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.oid") }}</view>
					<view class="t5">2018021317550058987789456898</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.consume.soid") }}</view>
					<view class="t5">J1516546489844516471541</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	padding-top: 60rpx;
	border-top: 1rpx solid #e5e5e5;

	.t1 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.t2 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 50rpx;
		color: #000000;
		margin-top: 40rpx;
	}

	.t3 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-top: 30rpx;
	}

	.list {
		padding: 10rpx 30rpx;

		.li {
			margin-top: 50rpx;
		}

		.t4 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.t5 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			width: 500rpx;
			text-align: right;
		}
	}
}
</style>
